<template>
  <div class="home">
    <router-view></router-view>
    <div class="bottom_div">
      <div class="tab_div" v-for="(item,index) in tabList" @click="change(index)">
        <router-link :to="item.to">
        <img :src="index==selected?item.activeUrl:item.url" />
        <p :class="{color_active:index==selected}">{{item.text}}</p>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabList: [{
            url: require("../assets/home/tab_home.png"),
            activeUrl: require("../assets/home/tab_home_active.png"),
            text: "首页",
            to:"/Home"
          }, {
            url: require("../assets/home/tab_shopcart.png"),
            activeUrl: require("../assets/home/tab_shopcart_active.png"),
            text: "购物车",
            to:"/Home/Shopcart"
          },
          {
            url: require("../assets/home/tab_orders.png"),
            activeUrl: require("../assets/home/tab_orders_active.png"),
            text: "订单",
            to:"/Home/order"
          },
          {
            url: require("../assets/home/tab_mine.png"),
            activeUrl: require("../assets/home/tab_mine_active.png"),
            text: "我的",
            to:"/Home/Mine"
          }
        ],
        selected: 0
      }
    },
    methods: {
      change: function(index) {
        this.selected = index;
      }
    },
  }
</script>
<style>
  .bottom_div {
    background: #f1f1f1;
    height: 49px;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
	align-items: center;
  }

  .bottom_div .tab_div {
    text-align: center;
    flex: 1
  }

  .tab_div img {
    height: 20px;
    width: 20px;
  }

  .tab_div p {
    font-size: 10px;
    color: #333333;
  }

  .tab_div .color_active {
    color: #1FA4FC;
  }
</style>